<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title th:text="${question.title}"></title>
  <head th:insert="~{import :: head}"></head>
  <head th:insert="~{import :: markdown}"></head>
  <script type="text/javascript">
      $(function () {
          editormd.markdownToHTML("question-view", {});
      });
  </script>
</head>
<body>
<div th:insert="~{navigation::nav}"></div>
<div class="container-fluid main profile">
  <div class="row">
    <!--    left-->
    <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
      <!--  正文    -->
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h4 class="question-title"><span th:text="${question.title}"></span></h4>
        <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12"/>
        <span class="text-desc">
          作者：<span th:text="${question.user.name}"></span> |
          阅读数：<span th:text="${question.viewCount}"></span> |
          发布于：<span th:text="${#dates.format(question.gmtCreate,'yyyy MMMM dd HH:mm')}"></span>
        </span>
        <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12"/>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="question-view">
          <textarea style="display:none;" th:text="${question.description}"></textarea>
        </div>

        <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12"/>
        <!--标签-->
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
           <span class="label label-info question-tag" th:each="tag : ${question.tag.split(',')}">
                        <span class="glyphicon glyphicon-tags"></span>
                        <span class="label label-info" th:text="${tag}"></span>
           </span>
        </div>

        <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12"/>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <a th:href="@{'/publish/'+${question.id}}" class="community-menu"
             th:if="${session.user != null && session.user.id == question.creator}">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true">编辑</span>
          </a>
        </div>
        <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12"/>
      </div>
      <!--      回复-->
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp"/>
        <h4>
          <span th:text="${question.commentCount}">0</span>
          个回复
        </h4>
        <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp"/>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comments" th:each="comment : ${comments}">
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object img-circle" th:src="${comment.user.avatarUrl}" alt="...">
              </a>
            </div>
            <div class="media-body" th:data="${'comment-body-'+comment.id}">
              <h5 class="media-heading">
                <span th:text="${comment.user.name}"></span>
              </h5>
              <div th:text="${comment.content}"></div>
              <div class="menu">
                <span class="glyphicon glyphicon-thumbs-up icon"></span>
                <span th:data-id="${comment.id}"
                      onclick="collapseComments(this)" class="comment-icon">
                                    <span class="glyphicon glyphicon-comment"></span>
                                    <span th:text="${comment.commentCount}"></span>
                                </span>
                <span class="pull-right" th:text="${#dates.format(comment.gmtCreate,'yyyy MMMM dd HH:mm')}"></span>
              </div>
            </div>
            <!--              二级评论-->

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse sub-comments" th:id="${'comment-'+comment.id}">
              <!--              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comments" th:each="comment : ${comments}">-->
              <!--                <div class="media">-->
              <!--                  <div class="media-left">-->
              <!--                    <a href="#">-->
              <!--                      <img class="media-object img-circle" th:src="${comment.user.avatarUrl}" alt="...">-->
              <!--                    </a>-->
              <!--                  </div>-->
              <!--                  <div class="media-body">-->
              <!--                    <h5 class="media-heading">-->
              <!--                      <span th:text="${comment.user.name}"></span>-->
              <!--                    </h5>-->
              <!--                    <div th:text="${comment.content}"></div>-->
              <!--                    <div class="menu">-->
              <!--                      <span class="pull-right"-->
              <!--                            th:text="${#dates.format(comment.gmtCreate,'yyyy MMMM dd HH:mm')}"></span>-->
              <!--                    </div>-->
              <!--                  </div>-->
              <!--                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse " th:id="${'comment-'+comment.id}">-->
              <!--                    esdfk;-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comments">
                <input type="text" class="form-control" placeholder="评论一下" th:id="${'input-'+comment.id}">
                <button type="button" class="btn btn-success pull-right" th:data-id="${comment.id}"
                        onclick="comment(this)">评论
                </button>
              </div>
            </div>
          </div>

        </div>

        <h4>提交回复</h4>
        <!--      回复框-->
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="comment_section">
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object img-rounded"
                     th:src="${session.user != null ? session.user.avatarUrl : '/images/default-avatar.png'}"
                     alt="...">
              </a>
            </div>
            <div class="media-body">
              <h5 class="media-heading">
                <span th:text="${session.user != null ? session.user.name : '匿名用户'}"></span>
              </h5>
            </div>
          </div>
          <input type="hidden" id="question_id" th:value="${question.id}"/>
          <textarea class="form-control comment" rows="6" id="comment_content"></textarea>
          <button type="button" class="btn btn-success btn-comment" onclick="post()">回复</button>
        </div>
      </div>
    </div>
    <!--   right -->
    <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h3>发起人</h3>
        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object img-circle" th:src="${question.user.avatarUrl}" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">
              <span th:text="${question.user.name}"></span>
            </h4>
          </div>
        </div>
      </div>
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h3>相关问题</h3>
        <ul class="question-related">
          <li th:each="related : ${relatedQuestions}">
            <a th:href="@{'/question/'+ ${related.id}}" th:text="${related.title}"></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div th:insert="~{footer :: foot}"></div>
</body>
</html>